<template>
    <div class="goodsEdit-root">

        <el-dialog
                title="修改商品信息"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="close"
                :close="close">
            <!--<span>这是一段信息</span>-->

            <!--商品基本信息-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="edit-item-title">商品基本信息</span>
                    <el-button class="editBtn" type="text" icon="el-icon-edit"
                               v-if="!baseInfoFlag" @click="edit('baseInfo')">修改</el-button>
                    <div class="editBtn" v-else>
                        <el-button type="success" size="small" @click="submitChange(null)">提交修改</el-button>
                        <el-button icon="el-icon-close" type="text" @click="disableEdit('baseInfo')">取消修改</el-button>
                    </div>
                </div>
                <el-form :model="goodsItem">
                    <el-form-item label="商品编码" :label-width="formLabelWidth">
                        <el-input v-model="goodsItem.goodsCode" autocomplete="off"
                                  clearable :readonly="!baseInfoFlag"></el-input>
                    </el-form-item>

                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="goodsItem.goodsName" autocomplete="off"
                                  :readonly="!baseInfoFlag"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌" :label-width="formLabelWidth">
                        <el-input v-model="goodsItem.blank" autocomplete="off"
                                  :readonly="!baseInfoFlag"></el-input>
                    </el-form-item>

                    <el-form-item label="商品状态" :label-width="formLabelWidth">
                        <el-select v-model="goodsItem.status" :disabled="!baseInfoFlag"
                                   autocomplete="off">
                            <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

            </el-card><!--/ 商品基本信息-->

            <!--商品价格-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="edit-item-title">商品价格</span>
                    <el-button class="editBtn" type="text" icon="el-icon-edit"
                               v-if="!priceFlag" @click="edit('price')">修改</el-button>
                    <div class="editBtn" v-else>
                        <el-button type="success" size="small" @click="submitChange(null)">提交修改</el-button>
                        <el-button icon="el-icon-close" type="text" @click="disableEdit('price')">取消修改</el-button>
                    </div>
                </div>
                <div v-if="goodsItem.goodsPriceList && goodsItem.goodsPriceList.length>0">
                    <div v-for="(item, i) in goodsItem.goodsPriceList" :key="i" class="text item">
                        <el-input v-if="!priceFlag" style="width: 12%" v-model="item.price" :readonly="!priceFlag"></el-input>
                        <el-input-number v-else v-model="item.price" size="small" :min="0"></el-input-number>
                        元 / <el-tag type="warning">{{ item.unit.unit }}</el-tag>
                        <span style="margin-left: 20px"> 活动价格：</span>
                        <el-input v-if="!priceFlag" v-model="item.lowPrice" :readonly="!priceFlag" style="width: 12%; margin-left: 5px"/>
                        <el-input-number v-else v-model="item.lowPrice" size="small" :min="0"></el-input-number>
                        元
                    </div>
               </div>

                <div v-else>
                    暂无价格
                </div>
            </el-card><!--/ 商品价格-->

            <!--商品种类-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="edit-item-title">商品种类</span>
                    <el-button class="editBtn" type="text" icon="el-icon-edit"
                               v-if="!typeFlag" @click="edit('type')">修改</el-button>
                    <div class="editBtn" v-else>
                        <el-button type="success" size="small" @click="submitChange(null)">提交修改</el-button>
                        <el-button icon="el-icon-close" type="text" @click="disableEdit('type')">取消修改</el-button>
                    </div>
                </div>
                <!--商品种类标签-->
                <div v-if="goodsItem.typeList && goodsItem.typeList.length > 0">
                        <el-tag v-for="(item, i) in goodsItem.typeList"
                                :key="i"
                                class="goodsType-tag"
                                :closable="typeFlag"
                                @close="removeType(item)"
                        ><i class="el-icon-star-off"/> {{ item.typeName }} </el-tag>
                </div>
                <div v-else>
                    暂无种类
                </div>
                <!--添加种类按钮-->
                <el-button v-if="typeFlag" id="addType-btn"
                           type="warning"
                           icon="el-icon-plus"
                           size="small" @click="addType">添加种类</el-button>

            </el-card><!--/ 商品种类-->

            <!--商品库存-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="edit-item-title">库存</span>
                    <el-button class="editBtn" type="text" icon="el-icon-edit"
                               v-if="!stockFlag" @click="edit('stock')">修改</el-button>
                    <div class="editBtn" v-else>
                        <el-button type="success" size="small" @click="submitChange(null)">提交修改</el-button>
                        <el-button icon="el-icon-close" type="text" @click="disableEdit('stock')">取消修改</el-button>
                    </div>
                </div>
                <div v-if="goodsItem.stockList && goodsItem.stockList.length>0">
                    <div v-for="(item, i) in goodsItem.stockList" :key="i" class="text item">
                        <el-input v-if="!stockFlag" style="width: 12%" v-model="item.count" :readonly="!stockFlag"></el-input>
                        <el-input-number v-else v-model="item.count" size="small" :min="0"></el-input-number>
                        <el-tag type="success" style="margin-left: 5px">{{ item.unit.unit }}</el-tag>
                    </div>
                </div>
                <div v-else>
                    暂无库存
                </div>
            </el-card><!--/ 商品库存-->

            <!--<span slot="footer" class="dialog-footer">-->
            <!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
            <!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
            <!--</span>-->
        </el-dialog>

        <SelectGoodsType v-if="addTypeFlag" @close="addType"
                         :goodsTypeList="goodsTypeList"
                         :checked="goodsItem.typeList"></SelectGoodsType>

    </div>
</template>

<script>
import SelectGoodsType from "./SelectGoodsType";
import API from '../../api/api';
export default {
    name: "GoodsEdit",
    props: ['goodsTypeList', 'goods'],
    components: {
        SelectGoodsType,
    },
    data() {
        return {
            // 对话框标志位
            dialogVisible: true,
            // 基本信息修改标志位
            baseInfoFlag: false,
            // 价格修改标志位
            priceFlag: false,
            // 种类修改标志位
            typeFlag: false,
            // 库存修改标志位
            stockFlag: false,
            // 添加商品种类标志位
            addTypeFlag: false,

            //
            formLabelWidth: '120px',
            goodsItem: {},
            goodsDetail: {
                goodsCode: '00001',
                goodsName: '牛奶',
                status: 1,
                goodsPrice: [
                    // {
                    //     unitId: '111',
                    //     unit: '罐',
                    //     price: 10,
                    // },{
                    //     unitId: '222',
                    //     unit: '打',
                    //     price: 110,
                    // },{
                    //     unitId: '333',
                    //     unit: '件',
                    //     price: 215,
                    // },
                ],
                typeList: [
                    // {typeId: '2', typeName: '冷饮', isDefault: '1'},
                    // {typeId: '4', typeName: '牛奶', isDefault: '1'},
                ],
                stock: [
                    // {
                    //     stockId: '1',
                    //     unitId: '111',
                    //     unit: '罐',
                    //     count: '10',
                    // },{
                    //     stockId: '2',
                    //     unitId: '222',
                    //     unit: '打',
                    //     count: '5',
                    // },{
                    //     stockId: '3',
                    //     unitId: '333',
                    //     unit: '件',
                    //     count: '2',
                    // },
                ]
            },
            // 商品状态
            status: [
                {value: 1|'1', label: '可用'},
                {value: 0|'0', label: '不可用'}
            ],
        }
    },
    mounted() {
        if (this.goods) {
            console.log(this.goods, "~~~~~~~~商品编辑:组件接收到的值");
        }
        this.getGoodsDetail();
    },
    methods: {
        //
        getGoodsDetail() {
            let url = API.goods.goodsQuery;
            let param = {
                goodsCode: this.goods.goodsCode,
            };
            this.$get(url, param).then(res => {
                let data = res.data;
                if (data.success) {
                    this.goodsDetail = data.data;
                    let blank = '';
                    // 拼接品牌
                    if (this.goodsDetail.goodsName.indexOf('【') !== -1 ){
                        blank =  this.goodsDetail.goodsName.split('【')[1].split('】')[0];
                        this.goodsDetail.goodsName = this.goodsDetail.goodsName.split('】')[1];
                        this.goodsDetail.blank = blank;
                    }
                    // 拷贝一份
                    this.goodsItem = JSON.parse(JSON.stringify(this.goodsDetail));

                    console.log(blank, "==-=-=-=-=品牌");
                }
            }).catch(err => {
                this.$message.error("请求错误!")
            })
        },
        goBack() {

        },
        // 提交修改表单
        submitChange( flag ) {
            console.log(flag,"触发----------------");
            let url = API.goods.update;
            this.goodsItem.typeList?.forEach(item => {
               item.goodsCode = this.goods.goodsCode;
            });
            if (this.goodsItem.goodsName !== this.goodsDetail.goodsName) {
                flag = 'info';
            }
          let param = {flag: flag, originGoodsCode: this.goodsDetail.goodsCode};
          Object.assign(param, this.goodsItem);
          if (this.goodsItem.blank) {
              param.goodsName = '【'+this.goodsItem.blank+'】'+param.goodsName;
          }
          this.$post(url, param).then( res => {
              let data = res.data;
              if (data.success) {
                  this.$message.success({
                      showClose: true,
                      message: data.msg,
                  });
                  this.baseInfoFlag = false;
                  this.priceFlag = false;
                  this.typeFlag = false;
                  this.stockFlag = false;
              } else {
                  this.$message.error(data.msg)
              }
          }).catch( err => {
              this.$message.error("请求失败!");
          });
        },
        // 关闭‘修改商品信息’对话框
        close() {
            this.$emit('close');
        },
        // 开启编辑功能
        edit(flag) {

            console.log(flag, '开启编辑功能------------');
            switch (flag) {
                case 'baseInfo':
                    this.baseInfoFlag = true;
                    break;
                case 'price':
                    this.priceFlag = true;
                    break;
                case 'type':
                    this.typeFlag = true;
                    break;
                default:
                    this.stockFlag = true;
                break;
            }
        },
        // 关闭编辑功能
        disableEdit(flag) {
            console.log(flag, '关闭编辑功能------------');
            switch (flag) {
                case 'baseInfo':
                    this.baseInfoFlag = false;
                    // 修改为原来的值
                    const goodsName = this.goodsDetail.goodsName;
                    const status = this.goodsDetail.status;
                    this.goodsItem.goodsName = goodsName;
                    this.goodsItem.status = status;
                    this.goodsItem.blank = JSON.parse(JSON.stringify(this.goodsDetail.blank));
                    // console.log(this.goodsDetail, 'goodsDetail-------------');
                    // console.log(this.goodsItem, '看看goodsItem-------------');
                    break;
                case 'price':
                    this.priceFlag = false;
                    // 修改为原来的值
                    const goodsPrice = JSON.parse(JSON.stringify(this.goodsDetail.goodsPriceList));
                    this.goodsItem.goodsPriceList = goodsPrice;
                    // console.log(this.goodsDetail.goodsPrice, 'goodsDetail goodsPrice-------------');
                    // console.log(this.goodsItem.goodsPrice, '看看goodsItem goodsPrice-------------');
                    break;
                case 'type':
                    this.typeFlag = false;
                    // 修改为原来的值
                    this.goodsItem.typeList = JSON.parse(JSON.stringify( this.goodsDetail.typeList));
                    // console.log(this.goodsDetail.goodsType, 'goodsDetail goodsType-------------');
                    // console.log(this.goodsItem.goodsType, '看看goodsItem typeList-------------');
                    break;
                default:
                    this.stockFlag = false;
                    // 修改为原来的值
                    this.goodsItem.stockList = JSON.parse(JSON.stringify(this.goodsDetail.stockList));
                    // console.log(this.goodsDetail.stock, 'goodsDetail.stock-------------');
                    // console.log(this.goodsItem.stock, '看看goodsItem.stock-------------');
                    break;
            }
        },
        // 删除商品类型
        removeType (item) {
            console.log(item, '商品种类标签-------------');
            let index = this.goodsItem.typeList.indexOf(item);
            this.goodsItem.typeList.splice(index, 1);
        },
        // 打开或关闭 '添加种类' 对话框
        addType(val) {
            if (this.addTypeFlag) { // 只有是编辑状态,才赋值
                console.log(val, '=================val');
                this.goodsItem.typeList = val;
            }
            this.addTypeFlag = !this.addTypeFlag;
        },

    }
}
</script>

<style lang="scss" scoped>
    .goodsEdit-root{
        margin-top: 8px;
        .box-card{
            margin-bottom: 20px;
            /*width: 80%;*/
            /*align-items: center;*/
        }
        .edit-item-title {
            font-size: 16px;
            font-weight: bolder;
        }
        .editBtn {
            float: right;
            padding: 3px 0;
            align-items: center;
        }
        .goodsType-tag {
            margin-right: 10px;
        }
        /*‘添加商品种类’按钮*/
        #addType-btn {
            float: right;
            margin-bottom: 15px;
        }
        /deep/.el-input__inner{
            padding: 0 8px;
        }
        .el-input-number, .el-input {
            margin-bottom: 4px;
        }
    }

</style>
